<template>
  <div class="custom-steps">
    <div class="custom-steps-body">
      <div
        :style="{ '--steps-width': stepsWidth }"
        :class="stepsWidth ? 'custom-steps-width' : 'auto-steps-width'"
        v-if="!isDetail"
      >
        <el-steps :active="activeStep">
          <el-step
            v-for="(step, index) in steps"
            :key="index"
            :class="{ 'c-liner': index < currentStep }"
          >
            <template #title>
              <div
                class="custom-step-title"
                :class="{
                  'active-step': index === activeStep,
                  'u-pointer': index <= currentStep
                }"
                @click="onClick(index)"
              >
                <span class="step-sn" v-if="index >= currentStep|| activeStep===index">
                  {{ index + 1 }}
                </span>
                <span class="step-finish" v-else-if="index < currentStep">
                  <i class="el-icon-check"></i>
                </span>
                <span class="step-title-text">{{ step.title || step }}</span>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
      <el-tabs v-else v-model="activeStepStr">
        <el-tab-pane
          :label="steps[index]"
          :name="index + ''"
          v-for="(item, index) in steps"
          :key="index"
          :disabled="index > currentStep"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <slot></slot>
    <div
      class="fake-border"
      v-if="!noFooter"
      style="
        width: 100%;
        height: 1px;
        background: #ccc;
        position: absolute;
        left: 0;
      "
    ></div>
    <div class="steps-footer" v-if="!noFooter">
      <base-btn :btnData="btnCancel" @click.native="handleCancel"></base-btn>
      <base-btn
        :btnData="btnPrev"
        @click.native="activeStep--"
        v-if="activeStep > 0"
      ></base-btn>
      <template v-if="!islastConfirm">
        <base-btn
          :btnData="btnNext"
          @click.native="nextStep"
          v-if="activeStep < steps.length"
        ></base-btn>
        <base-btn
          :btnData="btnOk"
          @click.native="handleSubmit(listData.type)"
          v-if="activeStep === steps.length && !disabled"
        ></base-btn>
      </template>
      <template v-if="islastConfirm">
        <base-btn
          :btnData="btnNext"
          @click.native="nextStep"
          v-if="activeStep < steps.length - 1"
        ></base-btn>
        <base-btn
          :btnData="btnOk"
          @click.native="handleSubmit(listData.type)"
          v-if="activeStep === steps.length - 1 && !disabled"
        ></base-btn>
      </template>
    </div>
  </div>
</template>

<script>
import BaseBtn from '@/components/BaseBtn/index';

export default {
  name: 'CSteps',
  components: {
    BaseBtn
  },
  props: {
    value: {},
    isDetail: {
      type: Boolean,
      default: false
    },
    steps: {
      type: Array,
      required: true,
      default: () => []
    },
    stepsWidth: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    noFooter: {
      type: Boolean,
      default: false
    },
    islastConfirm: {
      type: Boolean,
      default: true
    },
    currentStep: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      fileName: '',
      btnPrev: {
        name: '上一步',
        type: 'prev'
      },
      btnNext: {
        name: '下一步',
        type: 'next'
      },
      btnOk: {
        name: '确定',
        type: 'ok'
      },
      btnCancel: {
        name: '取消',
        type: 'cancel',
        bgColor: '#2B2B2C'
      }
    };
  },
  computed: {
    activeStep: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit('input', v);
      }
    },
    activeStepStr: {
      get() {
        return this.activeStep + '';
      },
      set(v) {
        this.activeStep = +v;
      }
    }
  },
  created() {},
  methods: {
    resetStep() {
      this.activeStep = 0;
    },
    nextStep() {
      this.activeStep++;
    },
    handleCancel() {
      this.$emit('cancel');
    },
    handleSubmit() {
      this.$emit('submit');
    },
    onClick(index) {
      if (index > this.currentStep) return;
      this.activeStep = index;
      this.$emit('change', index);
    }
  }
};
</script>

<style lang="scss" scoped>
.custom-steps {
  ::v-deep .el-step__icon {
    display: none;
  }

  ::v-deep .el-step.is-horizontal {
    display: flex;
    flex-direction: row-reverse;
  }

  ::v-deep .el-step__main {
    white-space: nowrap;
  }

  .step-sn,
  .step-finish {
    display: inline-flex;
    background: #ebedf0;
    color: #000;
    width: 28px;
    height: 28px;
    font-size: 16px;
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    font-weight: 300;
    margin-right: 6px;
  }

  .step-title-text {
    font-size: 16px;
    color: #303133;
    font-weight: 300;
  }

  .active-step {
    .step-title-text {
      // color: #ff4500;
      // font-weight: bold;
    }
    .step-sn{
      background: #0D48CE;
      color: #fff;
    }
  }

  .step-finish {
    background: #e8f3ff;
    color: #0d48ce;
  }

  ::v-deep .el-step__head.is-process,
  ::v-deep .el-step__head.is-finish,
  ::v-deep .el-step__head.is-wait {
    justify-content: center;
    align-items: center;
    display: flex;
    top: 6px;
  }

  ::v-deep .el-step.is-horizontal .el-step__line {
    margin: 0 10px !important;
    height: 1px;
    overflow: hidden;
    background-color: #d8d8d8;
  }

  .steps-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .auto-steps-width {
    margin: 0 100px 40px 100px;
  }

  .custom-steps-width {
    margin: auto;
    margin-bottom: 40px;
    width: var(--steps-width);
  }

  .custom-steps-body {
    max-height: 60vh;
    overflow: auto;
    padding: 0 25px;

    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }

    &::-webkit-scrollbar-track-piece {
      background: rgba(200, 200, 200, 0.1);
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 8px;
      background: rgba(200, 200, 200, 0.5);
    }
  }
}
.c-liner {
  ::v-deep .el-step__line-inner {
    border-width: 1px !important;
    border-color: #409eff;
    width: 100% !important;
  }
}

::v-deep .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}

::v-deep .el-step__title.is-wait {
  cursor: not-allowed;
}
::v-deep .el-tabs__item.is-disabled {
  cursor: not-allowed;
}
</style>
